<template>
  <div class="myOrder">
    <div class="header">
      <index-header 
        title="我的订单" 
        title1="天鹿市场" 
        title2="天鹿的SuperStore" 
        ifTitleClick 
        :handleChange="handleChange" 
        titleBgColor="#32aefd" 
        isShowTab 
        :goodsTypes="tab" 
        :selectedDefault="selectTab"
        >
        <template #other>
        </template>
      </index-header>
    </div>
    <div class="main">
      <ShowContain :title="tab[selectTab]">
        <div class="title">
          <p>
            <span>宝贝</span>
            <span>价格</span>
            <span>商品操作</span>
          </p>
          <p>实付款</p>
          <p>交易状态</p>
          <p>交易操作</p>
        </div>
        <div 
          class="content" 
          v-for="(item,index) in whichOrder" 
          :key="index" 
          @mouseenter="handleHover(item,true)" 
          @mouseleave="handleHover(item,false)"
        >
          <div class="content-main">
            <table class="main-table">
              <tr class="thead">
                <th colspan="1">
                  <span class="date">{{item.order_createTime}}</span>
                  <span class="lost" v-if="item.order_lostTime">(失效时间: {{item.order_lostTime}})</span>
                  <span class="order">订单号: {{item.order_code}}</span>
                </th>
                <th colspan="3">
                  <span class="hover" @click="() => {handleGoShop(item.shop_id)}">
                    {{item.shop_name}}
                  </span>
                </th>
              </tr>
              <tr class="tbody">
                <td>
                  <div class="imgName" v-for="(good,index) in item.orderGoods" :key="index">
                    <div>
                      <img :src="good.goods2title_title" alt="">
                      <span class="hover" @click="() => {handleGoDetail(good.goods_id)}">{{good.goods_name}}</span>
                    </div>
                    <div>
                      <span class="money">¥ {{good.goods_price}}</span>
                    </div>
                    <div>
                      <p>申请售后</p>
                      <p>投诉商家</p>
                    </div>
                  </div>
                </td>
                <td>
                  <span class="money">¥ {{item.order_price}}</span>
                </td>
                <td :class="{
                    'pay': orderStatus[item.order_status] === '待付款',
                    'success': orderStatus[item.order_status] === '交易成功' || orderStatus[item.order_status] === '待评价',
                    'colse': orderStatus[item.order_status] === '交易关闭'
                    }">
                  <span @click="()=>{orderStatus[item.order_status] === '待付款'? handleGoOrder(item.order_id):null }">
                    {{ orderStatus[item.order_status] !== '待付款'?orderStatus[item.order_status]:null }}
                  </span>
                </td>
                <td>
                <el-button 
                  @click="() => {handleEvaluated(item, false)}" 
                  :disabled="orderStatus[item.order_status] !== '待评价'"
                  v-if="orderStatus[item.order_status] !== '交易完成'"
                >
                  {{orderStatus[item.order_status] === '交易完成'?'已评价':'评价'}}
                </el-button>
                <el-button 
                  @click="() => {handleEvaluated(item, true)}"
                  v-else
                >
                  查看评价
                </el-button>
                </td>
              </tr>
            </table>
          </div>
          <div 
            v-if=" orderStatus[item.order_status] !== '待付款' && item.hovered" 
            class="hoverShow"
          >
            <i class="iconfont icon-delete" @click="handleDialog"/>
            <el-dialog
              :visible.sync="dialogVisible"
              width="30%"
            >
              <span :style="{fontSize: '18px', color: 'red'}">请慎重,删除订单不可恢复!!!!</span>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleDeleteOrder(item)">确定删除</el-button>
                <el-button @click="handleCloseDialog">取 消</el-button>
              </span>
            </el-dialog>
          </div>
        </div>
      </ShowContain>
    </div>
    <evaluate-modal :visible="visible" @close="handleClose" :order="evaluateOrder" :isEvaluated="isEvaluated"/>
  </div>
</template>

<script>
import IndexHeader from '@/components/IndexHeader';
import ShowContain from '@/components/ShowContain';
import EvaluateModal from './EvaluateModal';
import { mapActions, mapState, mapMutations } from 'vuex';
export default {
  name: '',
  components: {
    IndexHeader,
    ShowContain,
    EvaluateModal
  },
  computed: { 
    ...mapState({
      myOrder: state => state.order.myOrder,
      myOrderFilter: state => state.order.myOrderFilter,
      userInfo: state => state.user.userInfo,
      login: state => state.user.login
    }),
    whichOrder(){
      return this.showFilter? this.myOrderFilter : this.myOrder
    },
  },
  data () {
    return {
      tab: ['全部订单','待付款','待评价','交易完成', '交易关闭'],
      orderStatus: ['待付款','待评价', '交易完成', '交易关闭'],
      selectTab: 0,
      visible: false,
      showFilter: false,
      evaluateOrder: null,
      dialogVisible: false,
      isEvaluated: false //是否已经评价
    };
  },
  created(){
    this.fetchGetAllOrderInfo({ user_id: this.login ? this.userInfo.user_id : JSON.parse(localStorage.userInfo).user_id});
    if(this.$route.params.order){
      this.handleChange(this.$route.params.order.type, this.$route.params.order.orderStatu);
    }
  },
  methods: {
    ...mapActions(['fetchGetAllOrderInfo', 'fetchDeleteOrderInfo']),
    ...mapMutations(['orderToDetail','filterMyOrder']),
    handleChange (which, index) {
      this.selectTab = index;
      if(which === '全部订单'){
        this.showFilter = false;
      }else{
        this.showFilter = true;
        console.log(index-1)
        this.filterMyOrder(index-1);
      }
    },
    handleHover (order, hover) {
      this.myOrder.forEach(item => {
        if (item.order_id === order.order_id) {
          item.hovered = hover;
        }
      });
    },
    handleDeleteOrder (order) {
      this.myOrder.forEach((item, index) => {
        if (item.order_id === order.order_id) {
          this.myOrder.splice(index, 1);
        }
      });
      this.myOrderFilter.forEach((item, index) => {
        if (item.order_id === order.order_id) {
          this.myOrderFilter.splice(index, 1);
        }
      });
      this.fetchDeleteOrderInfo({ user_id: this.userInfo.user_id, order_id: order.order_id });
      this.dialogVisible = false;
    },
    handleClose () {
      this.visible = false;
    },
    handleGoDetail(goods_id){
      this.$router.push({
        name: 'Detail',
        query: {
          goods_id
        }
      });
    },
    handleGoShop(shop_id){
      this.$router.push({
        name: 'Shop',
        query: {
          shop_id
        }
      });
    },
    handleGoOrder(order_id){
      this.orderToDetail(order_id);
      this.$router.push({
        name: 'MyOrderDetail',
        query: {
          order_id
        },
        params: {
          whichPage: 'MyOrder'
        }
      });
      this.$message({
        type: 'success',
        message: '您可以继续为订单付款啦。',
        showClose: true
      });
    },
    handleDialog(){
      this.dialogVisible = true;
    },
    handleEvaluated (order, isEvaluated) {
      this.visible = true;
      this.evaluateOrder = order;
      if(isEvaluated){
        this.isEvaluated = false;
        this.$nextTick(function(){
          this.isEvaluated = true;
        });
      }else{
        this.isEvaluated = false;
      }
    },
    handleCloseDialog(){
      this.dialogVisible = false;
    }
  },
}
</script>
<style lang='scss' scoped src="./index.scss" />
<style lang="scss">
.el-button {
  padding: 10px 16px;
}
.el-button:focus,
.el-button:hover {
  color: $theme-color;
  border-color: $theme-color;
  background-color: $theme-rgba-1;
}

</style>
